<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <title>MY</title>
  <meta name="keywords" content="博客,个人博客,陈,陈陈,陈陈陈,陈恢严,恢严,陈恢严个人博客,个人,个人相册,我的相册,相册" />
  <meta name="description" content="陈恢严个人博客，是一个主学JAVA后端语言、记录开发中遇到的技术难点、并专注于个人生活的博客。" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/static/asset/images/myspace/favicon.ico" type="image/x-icon">
  <link href="/asset/css/myspace.css" rel="stylesheet">
  <link href="/asset/layui/css/layui.css" rel="stylesheet">
  <link href="/asset/layuimini/css/layuimini.css" media="all" rel="stylesheet">
  <script src="/asset/js/jquery.min.js" type="text/javascript"></script>
  <!--[if lt IE 9]>
  <script src="/asset/js/myspace.js"></script>
  <![endif]-->

  <script type="text/javascript" src="/asset/js/vue.min.js"></script>
  <script type="text/javascript" src="/asset/layui/layui.js"></script>
  <script src="/asset/layuimini/js/lay-module/layuimini/layuimini.js" charset="utf-8"></script>

  <!-- 图片预览插件start -->
  <link rel="stylesheet" href="/asset/previewPhoto/index.css">
  <script type="text/javascript" src="/asset/previewPhoto/preview-photo.js"></script>
  <script type="text/javascript" src="/asset/previewPhoto/index.js"></script>
  <!-- 图片预览插件end -->

    <!-- 评论插件start -->
    <link rel="stylesheet" type="text/css" href="/asset/commpluing/css/main.css" />
    <link rel="stylesheet" type="text/css" href="/asset/commpluing/css/sinaFaceAndEffec.css" />
    <script type="text/javascript" src="/asset/commpluing/js/main.js"></script>
    <script type="text/javascript" src="/asset/commpluing/js/sinaFaceAndEffec.js"></script>
    <!-- 评论插件end -->

    <!-- video.js -->
    <link rel="stylesheet" type="text/css" href="/asset/css/video-js.min.css">
    <script src="/asset/js/video.min.js"></script>
    <!-- video.js -->
</head>
<body>
  <div id="myspace">
    <header>
      <h1>
        <a href="javascript:location.reload()" v-text="infoSet.title"></a>
        <strong v-text="loginUserName" v-on:click="spaceUserEdit(loginUserName)"></strong>
        <i v-if="infoSet.title == '' || infoSet.title == null" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 26px;"></i>
      </h1>
      <span class="love-sweet">亲密度：<strong v-text="sweet"></strong></span>
      <p v-text="infoSet.honeyTalk"></p>
    </header>
    <!--nav begin-->
    <div id="nav">
      <ul>
        <li v-for="(item, index) in menuList" :key="item.id">
          <a v-if="item.href == '/'" v-bind:href="item.href" v-text="item.name"></a>
          <a v-if="item.href == 'sendLoveList'" href="javascript:void(0)" v-on:click="sendLoveList" v-text="item.name"></a>
          <a v-if="item.href == 'sendSeeBook'" href="javascript:void(0)" v-on:click="sendSeeBook" v-text="item.name"></a>
          <a v-if="item.href == 'sendDynamic'" href="javascript:void(0)" v-on:click="sendDynamic(4, '')" v-text="item.name"></a>
          <a v-if="item.href == '/blogSpace/toSeeBook' && seeBookList.length > 0" v-bind:href="item.href" v-text="item.name"></a>
        </li>
      </ul>
    </div>
    <!--nav end-->
    <div class="blank"></div>
    <div class="banner">
      <ul class="boy_girl">
        <li class="boyimg">
          <img v-bind:src="'/head_photo/' + spaceUserToHe.headUrl">
          <a href="javascript:void(0)" v-on:click = "aboutHeAndHer(0)">
            <span>关于他</span>
          </a>
        </li>
        <li class="girlimg">
          <img v-bind:src="'/head_photo/' + spaceUserToHer.headUrl">
          <a href="javascript:void(0)" v-on:click = "aboutHeAndHer(1)">
            <span>关于她</span>
          </a>
        </li>
      </ul>
      <ul class="texts">
        <p><img src="/asset/images/myspace/t-1.png" alt="人生，是一场盛大的遇见"></p>
        <p><img src="/asset/images/myspace/t-2.png" alt="若你懂得，就请珍惜。"></p>
        <p><img src="/asset/images/myspace/t-3.png" alt="无论下多久的雨，最后都会有彩虹；"></p>
        <p><img src="/asset/images/myspace/t-4.png" alt="无论你多么悲伤，要相信幸福在前方等候"></p>
      </ul>
    </div>
    <div class="blank"></div>
    <div class="memorial_day">
      <div class="time_axis"></div>
      <ul>
        <li v-for="(item, index) in timeLineList" :key="item.id" v-bind:class="'n' + (index + 1)" v-on:click="timeLineDetail(item.title, item.remark)">
          <a href="javascript:void(0)" v-text="item.title"></a>
          <div class="dateview" v-text="item.timeLineValue"></div>
        </li>
      </ul>
    </div>
    <div class="blank"></div>
    <article>
      <div class="l_box">
        <div class="about_he">
          <h2>关于他</h2>
          <ul>
            <img v-bind:src="'/head_photo/' + spaceUserToHe.headUrl">
            <p v-text="'昵称：' + spaceUserToHe.userName" v-bind:title="spaceUserToHe.userName">xxx</p>
            <p v-text="'生日：' + spaceUserToHe.bothdayValue" v-bind:title="spaceUserToHe.bothdayValue">xxx</p>
            <p v-text="'职业：' + spaceUserToHe.professional" v-bind:title="spaceUserToHe.professional">xxx</p>
            <p v-text="'爱好：' + spaceUserToHe.hobby" v-bind:title="spaceUserToHe.hobby">xxx</p>
          </ul>
        </div>
        <div class="about_me">
          <h2>关于她</h2>
          <ul>
            <img v-bind:src="'/head_photo/' + spaceUserToHer.headUrl">
            <p v-text="'昵称：' + spaceUserToHer.userName" v-bind:title="spaceUserToHer.userName">xxx</p>
            <p v-text="'生日：' + spaceUserToHer.bothdayValue" v-bind:title="spaceUserToHer.bothdayValue">xxx</p>
            <p v-text="'职业：' + spaceUserToHer.professional" v-bind:title="spaceUserToHer.professional">xxx</p>
            <p v-text="'爱好：' + spaceUserToHer.hobby" v-bind:title="spaceUserToHer.hobby">xxx</p>
          </ul>
        </div>
        <div class="clear"></div>
        <div class="newslist">
          <h2>进行中的清单（点击写感受结束）</h2>
          <ul>
            <li v-for="(item, index) in loveListList" :key="item.id">
              <a href="javascript:void(0)" v-html="'恋爱清单：' + item.content" v-bind:title="item.content" v-on:click="sendDynamic(0, item.id)"></a>
            </li>
            <li v-for="(item, index) in seeBookList" :key="item.id">
              <a href="javascript:void(0)" v-text="'看书清单：《' + item.bookName + '》、' + item.directoryName + '、' + item.bookListName + ' 章节'"
                 v-bind:title="'《' + item.bookName + '》、' + item.directoryName + '、' + item.bookListName + ' 章节'" v-on:click="sendDynamic(1, item.id)"></a>
            </li>
          </ul>
        </div>
        <div class="viny">
          <ul>
            <dl>
              <dt class="art"><img src="/asset/images/myspace/artwork.png" alt="专辑"></dt>
              <dd class="icon-song"><span></span><i v-text="infoSet.musicName" v-bind:title="infoSet.musicName"></i></dd>
              <dd class="icon-artist"><span></span><i v-text="'歌手：' + infoSet.nameArtist" v-bind:title="infoSet.nameArtist"></i></dd>
              <dd class="icon-album"><span></span>专辑：无</dd>
              <dd class="music">
                <audio v-bind:src="'/music/' + infoSet.mp3" controls></audio>
              </dd>
              <!--也可以添加loop属性 音频加载到末尾时，会重新播放-->
            </dl>
          </ul>
        </div>
      </div>
      <!--l_box end -->
      <div class="r_box">

        <li v-for="(item, index) in dynamicList" :key="item.id" class="r_box_li">
          <!-- 恋爱清单动态 -->
          <div v-if="item.type == 0">
            <div class="dy-box">
              <i class="dy-title">来自 <span class="dy-username" v-text="item.userName">xxx</span> 的“<span v-html="item.loveContent"></span>”恋爱清单的感受：</i>
              <span class="dy-content" v-html="item.content">xxxx</span>
            </div>
              <div class="dy-image">
                  <span class="item-span" v-for="(imgItem, imgIndex) in item.dynamicImgList">
                    <img v-if="imgItem.fileType == '0'" v-bind:src="'/dynamic/' + imgItem.thumUrl" v-bind:data-preview-src="'/dynamic/' + imgItem.thumUrl" :key="imgItem.id">
                    <img class="video-photo" v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)" v-bind:src="'/dynamic/' + imgItem.onePhoto" :key="imgItem.id">
                    <span class="video-ptspan" v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)"></span>
                      <!--                  <video v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)"-->
                      <!--                          class="video-js"-->
                      <!--                         v-bind:poster="'/dynamic/' + imgItem.onePhoto"-->
                      <!--                          preload="auto"-->
                      <!--                         controls="false"-->
                      <!--                          fullscreenToggle="true"-->
                      <!--                         playToggle="true"-->
                      <!--                          data-setup='{}'>-->
                      <!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/mp4">-->
                      <!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/webm">-->
                      <!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/ogg">-->
                      <!--                      <p class="vjs-no-js">-->
                      <!--                        浏览器不支持HTML5视频播放-->
                      <!--                      </p>-->
                      <!--                    </video>-->
                </span>
              </div>
            <p class="dy-love-list">满意度：<b v-text="item.satisfiedValue">xxx</b></p>
            <div class="dy-love-list dy-dtime">
              增加亲密值：<b v-text="item.loveSweet">0</b>
              <time v-text="item.createDate">发布时间</time>
            </div>
            <div class="dy-repy">
              <span v-on:click="clickRepy(item.id)">评论</span>
            </div>
            <div class="comment-body" v-if="item.commentList != null && item.commentList != ''">
                <div v-for="(commItem, commIndex) in item.commentList" :key="commItem.id" class="repy-to-comm">
                    <p v-if="commItem.type == 0" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.userName, commItem.userNameValue)">
                        <span v-text="commItem.userNameValue + '：'" class="comment-userName"></span>
                        <span v-html="commItem.content"></span>
                    </p>
                    <p v-if="commItem.type == 1" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.byUserName, commItem.byUserNameValue)">
                        <span v-text="commItem.byUserNameValue" class="comment-userName"></span>
                        回复
                        <span v-text="commItem.userNameValue +　'：'" class="comment-userName"></span>
                        <span v-html="commItem.content"></span>
                    </p>
                </div>
            </div>
          </div>

          <!-- 看书清单动态 -->
          <div v-if="item.type == 1">
            <div class="dy-box">
              <i class="dy-title">来自
                <span class="dy-username" v-text="item.userName">xxx</span> 的看书
                <span class="dy-book" v-text="item.bookName + ' ~ ' + item.directoryName + ' ~ ' + item.bookListName">xxxxx</span> 感受：</i>
              <span class="dy-content" v-html="item.content"></span>
            </div>
              <div class="dy-image">
                  <span class="item-span" v-for="(imgItem, imgIndex) in item.dynamicImgList">
                    <img v-if="imgItem.fileType == '0'" v-bind:src="'/dynamic/' + imgItem.thumUrl" v-bind:data-preview-src="'/dynamic/' + imgItem.thumUrl" :key="imgItem.id">
                    <img class="video-photo" v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)" v-bind:src="'/dynamic/' + imgItem.onePhoto" :key="imgItem.id">
                    <span class="video-ptspan" v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)"></span>
                      <!--                  <video v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)"-->
                      <!--                          class="video-js"-->
                      <!--                         v-bind:poster="'/dynamic/' + imgItem.onePhoto"-->
                      <!--                          preload="auto"-->
                      <!--                         controls="false"-->
                      <!--                          fullscreenToggle="true"-->
                      <!--                         playToggle="true"-->
                      <!--                          data-setup='{}'>-->
                      <!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/mp4">-->
                      <!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/webm">-->
                      <!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/ogg">-->
                      <!--                      <p class="vjs-no-js">-->
                      <!--                        浏览器不支持HTML5视频播放-->
                      <!--                      </p>-->
                      <!--                    </video>-->
                </span>
              </div>
            <div class="dy-love-list">
              增加亲密值：<b v-text="item.bookSweet">0</b>
              <time v-text="item.createDate">发布时间</time>
            </div>
            <div class="dy-repy">
              <span v-on:click="clickRepy(item.id)">评论</span>
            </div>
              <div class="comment-body" v-if="item.commentList != null && item.commentList != ''">
                  <div v-for="(commItem, commIndex) in item.commentList" :key="commItem.id" class="repy-to-comm">
                      <p v-if="commItem.type == 0" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.userName, commItem.userNameValue)">
                          <span v-text="commItem.userNameValue + '：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                      <p v-if="commItem.type == 1" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.byUserName, commItem.byUserNameValue)">
                          <span v-text="commItem.byUserNameValue" class="comment-userName"></span>
                          回复
                          <span v-text="commItem.userNameValue +　'：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                  </div>
              </div>
          </div>

          <!-- 发起恋爱清单动态 -->
          <div v-if="item.type == 2">
            <div class="dy-box">
              <i class="dy-title"><span class="dy-username" v-text="item.userName">xxx</span> 发起了一条 恋爱清单：</i>
              <span class="dy-content" v-html="item.content">xxx</span>
            </div>
            <div class="dy-love-list">
              清单状态：<b v-text="item.loveStatusValue">状态</b>
              <time v-text="item.createDate">发布时间</time>
            </div>
              <div v-if="item.loveStatus == 2" class="dy-love-list">
                  放弃原因：<b v-text="item.loveReson"></b>
              </div>
            <div class="dy-repy">
              <span v-on:click="clickRepy(item.id)">评论</span>
            </div>
              <div class="comment-body" v-if="item.commentList != null && item.commentList != ''">
                  <div v-for="(commItem, commIndex) in item.commentList" :key="commItem.id" class="repy-to-comm">
                      <p v-if="commItem.type == 0" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.userName, commItem.userNameValue)">
                          <span v-text="commItem.userNameValue + '：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                      <p v-if="commItem.type == 1" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.byUserName, commItem.byUserNameValue)">
                          <span v-text="commItem.byUserNameValue" class="comment-userName"></span>
                          回复
                          <span v-text="commItem.userNameValue +　'：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                  </div>
              </div>
          </div>

          <!-- 发起看书清单动态 -->
          <div v-if="item.type == 3">
            <div class="dy-box">
              <i class="dy-title"><span class="dy-username" v-text="item.userName">xxx</span> 发起了 看书清单：</i>
              <p v-html="item.content">xxxx</p>
            </div>
            <div class="dy-love-list">
              清单状态：<b v-text="item.bookStatusValue">xxx</b>
              <time v-text="item.createDate">发布时间</time>
            </div>
              <div v-if="item.bookStatus == 3" class="dy-love-list">
                  放弃原因：<b v-text="item.bookReson"></b>
              </div>
            <div class="dy-repy">
              <span v-on:click="clickRepy(item.id)">评论</span>
            </div>
              <div class="comment-body" v-if="item.commentList != null && item.commentList != ''">
                  <div v-for="(commItem, commIndex) in item.commentList" :key="commItem.id" class="repy-to-comm">
                      <p v-if="commItem.type == 0" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.userName, commItem.userNameValue)">
                          <span v-text="commItem.userNameValue + '：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                      <p v-if="commItem.type == 1" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.byUserName, commItem.byUserNameValue)">
                          <span v-text="commItem.byUserNameValue" class="comment-userName"></span>
                          回复
                          <span v-text="commItem.userNameValue +　'：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                  </div>
              </div>
          </div>

          <!-- 其他动态 -->
          <div v-if="item.type == 4">
            <div class="dy-box">
              <i class="dy-title"><span class="dy-username" v-text="item.userName">xxx</span> 发布了一条动态：</i>
              <span class="dy-content" v-html="item.content">xxxx</span>
            </div>
            <div class="dy-image">
                <span class="item-span" v-for="(imgItem, imgIndex) in item.dynamicImgList">
                  <img v-if="imgItem.fileType == '0'" v-bind:src="'/dynamic/' + imgItem.thumUrl" v-bind:data-preview-src="'/dynamic/' + imgItem.thumUrl" :key="imgItem.id">
                    <img class="video-photo" v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)" v-bind:src="'/dynamic/' + imgItem.onePhoto" :key="imgItem.id">
                    <span class="video-ptspan" v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)"></span>
<!--                  <video v-if="imgItem.fileType == '1'" v-on:click="clickPlayVideo('/dynamic/' + imgItem.thumUrl)"-->
<!--                          class="video-js"-->
<!--                         v-bind:poster="'/dynamic/' + imgItem.onePhoto"-->
<!--                          preload="auto"-->
<!--                         controls="false"-->
<!--                          fullscreenToggle="true"-->
<!--                         playToggle="true"-->
<!--                          data-setup='{}'>-->
<!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/mp4">-->
<!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/webm">-->
<!--                          <source v-bind:src="'/dynamic/' + imgItem.thumUrl" type="video/ogg">-->
<!--                      <p class="vjs-no-js">-->
<!--                        浏览器不支持HTML5视频播放-->
<!--                      </p>-->
<!--                    </video>-->
                </span>
            </div>
            <div class="dy-love-list">
              <time v-text="item.createDate">发布时间</time>
            </div>
            <div class="dy-repy">
              <span v-on:click="clickRepy(item.id)">评论</span>
            </div>
              <div class="comment-body" v-if="item.commentList != null && item.commentList != ''">
                  <div v-for="(commItem, commIndex) in item.commentList" :key="commItem.id" class="repy-to-comm">
                      <p v-if="commItem.type == 0" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.userName, commItem.userNameValue)">
                          <span v-text="commItem.userNameValue + '：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                      <p v-if="commItem.type == 1" v-on:click="clickRepyToComm(item.id, commItem.id, commItem.byUserName, commItem.byUserNameValue)">
                          <span v-text="commItem.byUserNameValue" class="comment-userName"></span>
                          回复
                          <span v-text="commItem.userNameValue +　'：'" class="comment-userName"></span>
                          <span v-html="commItem.content"></span>
                      </p>
                  </div>
              </div>
          </div>
        </li>

        <!-- 分页 -->
        <div id="pageContent" class="pagelist pagebg"></div>

        <div class="repy-box">
          <div class="repy-input">
            <input type="input" id="repy-content" v-model="commForm.content" placeholder="评论">
            <span class="layui-icon layui-icon-face-surprised" id="repy-face-icon" title="表情"></span>
          </div>
          <div class="repy-btn-box">
              <button type="button" id="quxiaoBtn" v-on:click="quxiaoFun">取消</button>
            <button type="button" id="repyBtn" v-on:click="repyFun">发送</button>
          </div>
        </div>

      </div>
    </article>
    <footer>
      <p>我们的空间，记录我们的点点滴滴</p>
    </footer>
  </div>
</body>
<script>

  $(function(){
    // 评论插件：绑定表情
    $('#repy-face-icon').SinaEmotion($('#repy-content'));
    $('#repy-face-icon').click(function(){
      var top = parseInt($("#emotions").css("top").replace("px", ""));
      $("#emotions").css("top", (top - 325) + "px");
    });

    $(document).on("click", "#playMiniVideo", function(){
        layer.closeAll();
    });
  });

  var myspace = new Vue({
    el: '#myspace',
    data: function () {
      return {
        menuList: [], //导航
        infoSet: [], //基本配置
        spaceUserToHe: [], //空间用户他
        spaceUserToHer: [], //空间用户她
        timeLineList: [], //时间线
        loveListList: [], //恋爱清单
        seeBookList: [], //看书清单
        dynamicList: [], //动态列表
        loginUserName: '', //登录用户名
        sweet: 0, //亲密度
        count: 0, //动态总数
        curr: 1, //页数
        limit: 8, //每页条数
        commForm: {
          serviceId: '', //动态编号
          userName: '', //评论者昵称保存空间用户编号
          byUserName: '', //回复者昵称保存空间用户编号
          classify: 4,  //个人空间日记留言
          content: '',
          parentId: '',
          type: 0,
        }
      }
    },
    created: function () {
      const me = this;
      me.$nextTick(function () {
        me.getInitData();
        me.getDynamicList(me.curr, me.limit);
      });
    },
    methods: {
      //初始化基本信息
      getInitData: function(){
        const me = this;
        $.ajax({
          type: 'POST',
          url: '/blogSpace/getInitData',
          data: {},
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.menuList = data.menuList;
              me.infoSet = data.infoSet;
              me.spaceUserToHe = data.spaceUserToHe;
              me.spaceUserToHer = data.spaceUserToHer;
              me.timeLineList = data.timeLineList;
              me.loveListList = data.loveListList;
              me.seeBookList = data.seeBookList;
              me.sweet = data.sweet;
              me.loginUserName = data.loginUserName;

              //3秒后初始化表情内容
              setTimeout(function () {
                me.loveListList.forEach(function (item) {
                  item.content = me.analyticEmotion(item.content);
                });
              }, 3000);

            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //初始化动态列表信息
      getDynamicList: function(curr, limit){
        const me = this;
        var url = '/blogSpace/getDynamicList';
        $.ajax({
          type: 'POST',
          url: url,
          data: {
            page: curr,
            limit: limit
          },
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              me.dynamicList = data.dynamicList;
              me.count = data.count;

              //3秒后初始化动态表情内容，和评论内容
              setTimeout(function () {
                  me.dynamicList.forEach(function (item) {
                      item.content = me.analyticEmotion(item.content);
                      item.loveContent = me.analyticEmotion(item.loveContent);
                      item.commentList.forEach(function (comment) {
                          comment.content = me.analyticEmotion(comment.content);
                      });
                  });
              }, 3000);

              // 2秒后初始化图片预览
              setTimeout(function(){
                window.PreviewPhoto({ imageContainerType: (IsPC() ? 2 : 1) });
              }, 2000);

              me.initPage(); //初始化分页

            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
          }
        })
      },

      //点击评论
      clickRepy: function(serviceId){
        const me = this;
        me.commForm.serviceId = serviceId;
        $(".repy-box").show();
        $("#repy-content").focus();
      },

        //点击回复:serviceId动态编号，parentId父级编辑，userName评论者编号
        clickRepyToComm: function(serviceId, parentId, userName, userNameValue){
            const me = this;
            me.commForm.serviceId  = serviceId;
            me.commForm.userName  = userName;
            me.commForm.parentId = parentId;
            me.commForm.type = 1; //回复
            $(".repy-box").show();
            $("#repy-content").focus();
            $("#repy-content").attr("placeholder", "回复 " + userNameValue);
        },

      //点击发送按钮
      repyFun: function(){
        const me = this;
          me.commForm.content = $("#repy-content").val();
          if(me.commForm.content.length == 0){
              layer.msg('请输入内容', {icon:5});
              return;
          }
          $(".repy-box").hide();
        var url = '/blogSpace/sendRepy';
        $.ajax({
          type: 'POST',
          url: url,
          data: me.commForm,
          dataType: 'JSON',
          success: function(data){
            if(data.state == "200"){
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:6});
              });
              me.getDynamicList(me.curr, me.limit);
            }else{
              layui.use('layer', function(){
                var layer = layui.layer;
                layer.msg(data.message, {icon:2});
              });
            }
              me.quxiaoFun();
          },
          error: function(error){
            layui.use('layer', function(){
              var layer = layui.layer;
              layer.msg(error, {icon:2});
            });
              me.quxiaoFun();
          }
        })
      },

      //点击取消按钮
      quxiaoFun: function(){
        const me = this;
        me.commForm.serviceId  = '';
        me.commForm.userName  = '';
        me.commForm.byUserName  = '';
        me.commForm.content = '';
        me.commForm.parentId = '';
        me.commForm.type = 0;
          $("#repy-content").attr("placeholder", "评论");
        $(".repy-box").hide();
      },

      //关于他她详情
      aboutHeAndHer: function(type){
        const me = this;
        var heOrHer = me.spaceUserToHe;
        var heOrHerName = '关于他';
        if(type == 1){
          heOrHer = me.spaceUserToHer;
          heOrHerName = '关于她';
        }
        layui.use('layer', function(){
          var layer = layui.layer;
          layer.msg('<div><p><img src="/head_photo/' + heOrHer.headUrl + '" style="width: 40px;border-radius: 50%;"></p>' +
                  '<p>' + heOrHerName + '</p>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">昵称：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.userName + '</div></div>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">职业：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.professional + '</div></div>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">身高：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.tall + '</div></div>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">年龄：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.age + '</div></div>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">生日：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.bothdayValue + '</div></div>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">爱好：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.hobby + '</div></div>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">介绍：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.introduce + '</div></div>' +
                  '<div class="layui-form-item layui-row"><label class="layui-col-xs3 layui-col-md5" style="text-align: right;color: #c4c4c4;">备注：</label><div class="layui-col-xs9 layui-col-md7" style="text-align: left;">' + heOrHer.remark + '</div></div>' +
                  '</div>', {
            btn: ['要幸福哦'],
            shade: 0.8,
            shadeClose: true,
            time: 0,
            area: '100%',
          });
        });
      },

    //点击播放视频
    clickPlayVideo: function (videoUrl){
        layui.use(['layuimini'], function () {
            var layuimini = layui.layuimini;
            var index = layer.open({
                title: false,
                id: 'playMiniVideo',
                type: 1,
                // shade: 0.7,
                maxmin:false,
                offset: '0',
                closeBtn: 0, //关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
                skin: 'previewVideo-class', //透明
                zIndex:998,
                // shadeClose: true,
                area: ['100%', '100%'], //宽高
                // maxWidth: '700px',
                content: '<video onclick="layer.closeAll();" class="tkplay-video" ' +
                    'fluid = "true" ' + //何时true，Video.js播放器将具有流畅的大小。换句话说，它将扩展以适应其容器
                    'preload="auto" ' +
                    'controls="true" ' +
                    'fullscreenToggle="true" ' +
                    'playToggle="true" ' +
                    'data-setup="{}" ' +
                    'controlsList="nofullscreen nodownload noremote footbar" ' + //删除controls按钮，配合css
                    'autoplay="true">' +
                    '<source src="' + videoUrl + '" type="video/mp4"/>' +
                    '<source src="' + videoUrl + '" type="video/webm"/>' +
                    '<source src="' + videoUrl + '" type="video/ogg"/>' +
                    '<p class="vjs-no-js">浏览器不支持HTML5视频播放</p>' +
                    '</video>'
            });

            return false;
        })
    },

      //关于他她详情
      timeLineDetail: function(title, content){
        layui.use('layer', function(){
          var layer = layui.layer;
          layer.msg('<p style="margin-bottom: 20px;">' + title + '</p>' +
                  '<div class="layui-form-item layui-row">' +
                  '<div class="layui-col-xs12 layui-col-md12">' + content + '</div>' +
                  '</div>', {
            btn: ['要幸福哦'],
            shade: 0.8,
            shadeClose: true,
            time: 0,
            area: '100%',
          });
        });
      },

      //发起恋爱清单
      sendLoveList: function (){
        layui.use(['layuimini'], function () {
          var layuimini = layui.layuimini;
          var content = layuimini.getHrefContent('/blogSpace/sendLoveListIndex');
          var index = layer.open({
            title: '发起恋爱清单',
            type: 1,
            shade: 0.2,
            maxmin:false,
            offset: '0',
            zIndex:998,
            shadeClose: false,
            area: ['100%', '100%'], //宽高
            // maxWidth: '700px',
            content: content
          });

          return false;
        })
      },

      //发起约看书
       sendSeeBook: function (){
         layui.use(['layuimini'], function () {
           var layuimini = layui.layuimini;
           var content = layuimini.getHrefContent('/blogSpace/sendSeeBookIndex');
           var index = layer.open({
             title: '发起约看书清单',
             type: 1,
             shade: 0.2,
             maxmin:false,
             offset: '0',
             zIndex:998,
             shadeClose: false,
             area: ['100%', '100%'], //宽高
             // maxWidth: '700px',
             content: content
           });

           return false;
         })
      },

      //发起普通动态、写恋爱清单感受、写约看书感受(type:0恋爱清单感受，1约看书感受，4其他；serviceId：写感受业务编辑)
       sendDynamic: function (type, serviceId){
           layui.use(['layuimini'], function () {
               var titleName = "";
               if(type == 0){
                   titleName = "恋爱清单感受";
               }else if(type == 1){
                   titleName = "一起看书感受";
               }else if(type == 4){
                   titleName = "发布普通动态";
               }
               var layuimini = layui.layuimini;
               var content = layuimini.getHrefContent('/blogSpace/sendDynamicindex?type=' + type + '&serviceId=' + serviceId);
               var index = layer.open({
                   title: titleName,
                   type: 1,
                   shade: 0.2,
                   maxmin:false,
                   offset: '0',
                   zIndex: 998,
                   shadeClose: false,
                   area: ['100%', '100%'], //宽高
                   // maxWidth: '700px',
                   content: content
               });

               return false;
           })
      },

      //修改空间用户资料
      spaceUserEdit: function(loginUserName){
        layui.use(['layuimini'], function () {
          var layuimini = layui.layuimini;
          var content = layuimini.getHrefContent('/blogSpace/spaceUserEdit');
          var index = layer.open({
            title: "修改资料(" + loginUserName + ")",
            type: 1,
            shade: 0.2,
            maxmin:false,
            offset: '0',
            zIndex: 998,
            shadeClose: false,
            area: ['100%', '100%'], //宽高
            // maxWidth: '700px',
            content: content
          });

          return false;
        })
      },

      //格式化评论内容
      analyticEmotion: function(content){
        return AnalyticEmotion(content);
      },

      //分页
      initPage: function(){
        const me = this;
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          //执行一个laypage实例
          laypage.render({
            elem: 'pageContent' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: me.count //数据总数，从服务端得到
            ,limit: me.limit //每页条数
            ,curr: me.curr //页数
            // ,limits: [10, 20, 30, 40, 50] //每页条数的选择项
            ,layout: ['prev', 'page', 'next', 'count'] //自定义排版
            ,jump: function(obj, first){ //obj包含了当前分页的所有参数
              //首次不执行
              if(!first){
                me.curr = obj.curr;
                me.getDynamicList(obj.curr, obj.limit);
              }
            }
          });
        });
      }
    }
  });

  //监听手机端图片预览iframe,进行设置图片宽高
  function resize(obj){
    var ifrm = obj.contentWindow.document.getElementsByTagName("img");
    var body = obj.contentWindow.document.getElementsByTagName("body");
    ifrm[0].style.cssText = "max-width:" + obj.style.width + ";max-height:" + obj.style.height + ";";
    body[0].style.cssText = "margin: 0px;text-align:center;";
  }
</script>
</html>
